<template>
 <div>
     <div class="recommend-title">热销推荐</div>
     <ul>
         <router-link 
         tag="li"
          class="item border-bottom"
           v-for="item in recommlist"
            :key="item.id"
            :to="'/detail/' + item.id"
            >
                 <img :src="item.imgUrl" alt="" class="item-img">
             <div class="item-info">
                <p class="item-title">{{item.title}}</p>
                <p class="item-desc">{{item.desc}}</p>
                <button class="item-button">查看详情</button>
            </div>
         </router-link>
     </ul>
 </div>
</template>

<script>
 export default {
     props:{
         recommlist:Array
     },
   data () {
     return {
        recommemdList:[
            {
                id:"0001",
                imgUrl:"http://src.onlinedown.net/d/file/p/2016-09-27/a25eff394ea491ec3326cbfb0cbbd07f.jpg",
                title:"DECLDECLDECL",
                desc:"啊按时发顺丰阿萨德刚党阀,大撒发生发送发送d"
            },
            {
                id:"0002",
                imgUrl:"http://src.onlinedown.net/d/file/p/2016-09-27/a25eff394ea491ec3326cbfb0cbbd07f.jpg",
                title:"DECLDECLDECL",
                desc:"啊按时发顺丰阿萨德刚党阀,大撒发生发送发送d"
            },
            {
                id:"0003",
                imgUrl:"http://src.onlinedown.net/d/file/p/2016-09-27/a25eff394ea491ec3326cbfb0cbbd07f.jpg",
                title:"DECLDECLDECL",
                desc:"啊按时发顺丰阿萨德刚党阀,大撒发生发送发送d"
            },
            {
                id:"0004",
                imgUrl:"http://src.onlinedown.net/d/file/p/2016-09-27/a25eff394ea491ec3326cbfb0cbbd07f.jpg",
                title:"DECLDECLDECL",
                desc:"啊按时发顺丰阿萨德刚党阀,大撒发生发送发送d"
            },
        ]
     }
   },
   components: {

   }
 }
</script>

<style lang="stylus" scoped>
@import '~style/mixins.styl'
.recommend-title{
    line-height: 30px;
    background: skyblue;
    text-indent: 11px;
    margin-top: 11px;
}
ul,p{
    margin: 0;
    padding: 0;
  
}
.item{
  display: flex;
    height: 94px;
    overflow: hidden;
}
 img{
     width: 50px;
     height: 50px;
     padding: 17px
 }
 .item-info{
     flex: 1;
     min-width 0;
 }
 .item-title{
     line-height: 20px;
     font-size: 14px;
      ellipsis()
 }
  .item-desc{
     line-height: 18px;
     font-size: 12px;
     color: darkgrey
      ellipsis()
 }
</style>
